<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="vizzly.min.css" />
    <link rel="stylesheet" type="text/css" href="extlib/jquery-ui-1.8.20.custom.css" />
    <style type="text/css">
    html { height: 100% }
    body { font-family: Verdana, Helvetica, sans-serif; font-size:12px; height: 100%; }
    h1 { font-family: Verdana, Helvetica, sans-serif; font-size:16px; }
    </style>
    <!--[if IE]><script src="extlib/excanvas.js"></script><![endif]-->
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type='text/javascript' src='extlib/jquery-1.7.2.min.js'></script>
    <script type='text/javascript' src='extlib/jquery-ui-1.8.20.custom.min.js'></script>
    <script type='text/javascript' src='extlib/jquery.ui.touch-punch.min.js'></script>
    <script type='text/javascript' src='extlib/dygraph-combined.js'></script>
    <script type='text/javascript' src='vizzly.min.js'></script>
    <script type='text/javascript'>
    var g1Config = null;
    
    function init() {
        g1Config = {
            "graph": {
                "div": "map_canvas",
                "width": 600,
                "height": 250,
                "showForm": false
            },
            "appUrl": "vizzly?",
            "imageUrl" : "./images/",
            "mapCenter": new google.maps.LatLng(47.379022, 8.541001),
            "signals": [
            {
                "displayName": "Ozone [ppb]",
                "dataSource": { "type": "gsn", "serverAddress": "data.opensense.ethz.ch", "name": "opensense_oz47_instant_calibrated" },
                "dataField": "ozone_ppb",
                "deviceSelect": { "type": "single", "field": "device_id", "value": 3 },
                "timeField": "generation_time",
                "scaling": 1.0,
                "visible": true,
                "locationLatField": "latitude",
                "locationLngField": "longitude",
                "thresholds": [ 18.0, 8.0 ]
            },
            {
                "displayName": "Particular matter",
                "dataSource": { "type": "gsn", "serverAddress": "data.opensense.ethz.ch", "name": "opensense_minidisc_emb__mapped" },
                "dataField": "number",
                "deviceSelect": { "type": "single", "field": "device_id", "value": 3 },
                "timeField": "generation_time",
                "scaling": 1.0,
                "visible": true,
                "locationLatField": "latitude",
                "locationLngField": "longitude",
                "thresholds": [ 18.0, 8.0 ]
            },
            {
                "displayName": "CO [ppm]",
                "dataSource": { "type": "gsn", "serverAddress": "data.opensense.ethz.ch", "name": "opensense_alphasense_co_gps" },
                "dataField": "sensor_ppm",
                "deviceSelect": { "type": "single", "field": "device_id", "value": 3 },
                "timeField": "generation_time",
                "scaling": 1.0,
                "visible": true,
                "locationLatField": "latitude",
                "locationLngField": "longitude",
                "thresholds": [ 18.0, 8.0 ]
            }
            ]
        };
        var aggMap = new MapWidget(g1Config);
   
    }
    </script>
    <title>Vizzly &mdash; GSN Reader Map Widget Example</title>
  </head>

  <body onLoad="init();">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>
